<!-- Importamos los metodos js del abm de clientes -->
<script type="text/javascript" src="<?php echo base_url(); ?>js/clientes.js"></script>

<script type="text/javascript">
	//Esto se ejecuta cuando se termina de cargar la web
	$(document).ready(function(){
		//Le damos el foco al primer campo del formulario
		$("#apellido").focus();
		
		//Especificamos los campos que tienen restricciones en los valores de entrada
		$("#dni").mask("99999999");
	});
</script>

<!-- Identificador de seccion -->
<div>
	<hr>
	<ul class="breadcrumb">
		<li>
			<a href="<?php echo(site_url("inicio")); ?>">Home</a><span class="divider">/</span>
		</li>
		<li>
			<a href="<?php echo(site_url("cliente/consultar")); ?>">Clientes</a><span class="divider">/</span>
		</li>
		<li>
			<a href="<?php echo(current_url()); ?>">Crear Cliente</a>
		</li>
	</ul>
	<hr>
</div>

<!-- Formulario y ayuda -->	
<div class="row-fluid">
	<div class="box span7">
		<div class="box-header" data-original-title>
			<h2><i class="icon-edit"></i><span class="break"></span>Datos del Cliente</h2>
			<div class="box-icon">				
				<a href="#" class="btn-minimize"><i class="icon-chevron-up"></i></a>				
			</div>
		</div>
		<div class="box-content">
			<form class="form-horizontal" action="<?php echo(site_url('cliente/crear')); ?>" id="formCliente" method="post" target="iframeUpload">
				<fieldset>
					<div id="campoApellido" class="control-group">
						<label class="control-label" for="apellido">Apellido: (*)</label>
						<div class="controls">
						  <input class="input-xlarge" id="apellido" name="apellido" type="text" value="" placeholder="Apellido" required onkeyup="completarUsuario();">
						</div>
					</div>
					
					<div id="campoNombre" class="control-group">
						<label class="control-label" for="nombre">Nombre: (*)</label>
						<div class="controls">
						  <input class="input-xlarge" id="nombre" name="nombre" type="text" value="" placeholder="Nombre" required onkeyup="completarUsuario();">
						</div>
					</div>
					
					<div id="campoDni" class="control-group">
						<label class="control-label" for="dni">Dni:</label>
						<div class="controls">
						  <input class="input-xlarge" id="dni" name="dni" type="text" value="" placeholder="Dni">
						</div>
					</div>
					
					<div id="campoSexo" class="control-group">
						<label class="control-label" for="estado">Sexo: (*)</label>
						<div class="controls">
							<select id="sexo" name="sexo" class="span9" required>
								<option value="1">Masculino</option>
								<option value="0">Femenino</option>
							</select>
						</div>
					</div>
					
					<div id="campoEmpresa" class="control-group">
						<label class="control-label" for="empresa">Empresa:</label>
						<div class="controls">
						  <input class="input-xlarge" id="empresa" name="empresa" type="text" value="" placeholder="Empresa">
						</div>
					</div>
					
					<div id="campoPais" class="control-group">
						<label class="control-label" for="pais">Pa&iacute;s:</label>
						<div class="controls">
						  <input class="input-xlarge" id="pais" name="pais" type="text" value="" placeholder="Pa&iacute;s">
						</div>
					</div>
					
					<div id="campoProvincia" class="control-group">
						<label class="control-label" for="provincia">Provincia:</label>
						<div class="controls">
						  <input class="input-xlarge" id="provincia" name="provincia" type="text" value="" placeholder="Provincia">
						</div>
					</div>
					
					<div id="campoLocalidad" class="control-group">
						<label class="control-label" for="localidad">Localidad:</label>
						<div class="controls">
						  <input class="input-xlarge" id="localidad" name="localidad" type="text" value="" placeholder="Localidad">
						</div>
					</div>
					
					<div id="campoDireccion" class="control-group">
						<label class="control-label" for="direccion">Direcci&oacute;n:</label>
						<div class="controls">
						  <input class="input-xlarge" id="direccion" name="direccion" type="text" value="" placeholder="Direcci&oacute;n">
						</div>
					</div>
					
					<div id="campoEmail" class="control-group">
						<label class="control-label" for="email">Email: (*)</label>
						<div class="controls">
						  <input class="input-xlarge" id="email" name="email" type="text" value="" placeholder="Email" required>
						</div>
					</div>
					
					<div id="campoEmailAlternativo" class="control-group">
						<label class="control-label" for="emailAlternativo">Email Alternativo:</label>
						<div class="controls">
						  <input class="input-xlarge" id="emailAlternativo" name="emailAlternativo" type="text" value="" placeholder="Email Alternativo">
						</div>
					</div>
					
					<div id="campoEmailFacebook" class="control-group">
						<label class="control-label" for="emailFacebook">Email Facebook:</label>
						<div class="controls">
						  <input class="input-xlarge" id="emailFacebook" name="emailFacebook" type="text" value="" placeholder="Email Facebook">
						</div>
					</div>
					
					<div id="campoTelefono" class="control-group">
						<label class="control-label" for="telefono">Tel&eacute;fono:</label>
						<div class="controls">
						  <input class="input-xlarge" id="telefono" name="telefono" type="text" value="" placeholder="Tel&eacute;fono">
						</div>
					</div>
					
					<div id="campoFacebook" class="control-group">
						<label class="control-label" for="facebook">Facebook:</label>
						<div class="controls">
						  <input class="input-xlarge" id="facebook" name="facebook" type="text" value="" placeholder="Facebook">
						</div>
					</div>
					
					<div id="campoTwitter" class="control-group">
						<label class="control-label" for="twitter">Twitter:</label>
						<div class="controls">
						  <input class="input-xlarge" id="twitter" name="twitter" type="text" value="" placeholder="Twitter">
						</div>
					</div>
					
					<div id="campoObservaciones" class="control-group">
						<label class="control-label" for="observaciones">Observaciones:</label>
						<div class="controls">
						  <textarea id="observaciones" name="observaciones" class="input-xlarge" rows="5"></textarea>						 
						</div>
					</div>
					
					<div id="campoEstado" class="control-group">
						<label class="control-label" for="estado">Estado: (*)</label>
						<div class="controls">
							<select id="estado" name="estado" class="span9" required>
								<option value="1">Activo</option>
								<option value="0">Inactivo</option>
							</select>
						</div>
					</div>
					
					<div id="campoNombreUsuario" class="control-group">
						<label class="control-label" for="nombreUsuario">Usuario:</label>
						<div class="controls">
						  <input class="span9" id="nombreUsuario" name="nombreUsuario" type="text" value="" placeholder="Usuario" required>
						</div>
					</div>
					
					<div id="campoPassword" class="control-group">
						<label class="control-label" for="password">Password:</label>
						<div class="controls">
						  <input class="span9" id="password" name="password" type="text" value="" placeholder="Password" required>
						</div>
					</div>
					
					<div class="form-actions">
						<button type="button" class="btn btn-primary" onclick="crearCliente()">Guardar Cliente</button>
					</div>
					
					<iframe id="respuesta" name="iframeUpload" style="display:none"></iframe>
				</fieldset>
			</form>
		</div>
	</div><!--/span-->
	<div class="box span5">
		<div class="box-header" data-original-title>
			<h2><i class="icon-edit"></i><span class="break"></span>Ayuda Rápida</h2>
			<div class="box-icon">				
				<a href="#" class="btn-minimize"><i class="icon-chevron-up"></i></a>				
			</div>
		</div>
		<div class="box-content">
			* Los campos marcados con (*) son obligatorios
		</div>
	</div><!--/span-->
</div><!--/row-->

<hr>